<template>
  <view class="container">
    <view class="login-icon">
      <image class="login-img" src="/static/cover.jpg" />
    </view>
    <view class="login-from">
      <!--账号-->
      <view class="inputView">
        <image class="nameImage" src="/static/login_name.png" />
        <label class="loginLab" for="account">账号</label>
        <input
          name="username"
          class="inputText"
          placeholder="请输入用户名"
          focus="true"
          @input="inputUsername"
        />
      </view>
      <view class="line"></view>

      <!--密码-->
      <view class="inputView">
        <image class="keyImage" src="/static/login_pwd.png" />
        <label class="loginLab" for="pwd">密码</label>
        <input
          name="password"
          class="inputText"
          password="true"
          placeholder="请输入密码"
          @input="inputPassword"
        />
      </view>

      <!--按钮-->
      <view class="loginBtnView">
        <button class="loginBtn" type="primary" @click="clickLogin">登录</button>
      </view>
      <button class="registerBtn" type="default" size="mini" @click="clickRegister">注册</button>
    </view>
  </view>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  onLoad(){
    uni.hideHomeButton();
    uni.removeStorageSync("user");
    console.log(uni.getStorageSync("user"));
    console.log("-------------------------");
    
  
  },
  methods: {
    inputUsername(e) {
      this.username = e.detail.value;
    },
    inputPassword(e) {
      this.password = md5Libs.md5(e.detail.value);
    },
    clickLogin() {
      
      
      this.request({
        url:
          this.apiServer +
          "/user/login?username=" +
          this.username +
          "&password=" +
          this.password
      }).then(res => {
        console.log("login-----");
        console.log(res);

        uni.showToast({
          title: res.msg,
          icon: "none",
          duration: 1000
        });
        if (res.code == "500") {
          //失败
        } else {
          uni.setStorageSync("user", {
            id: res.data.id,
            nickName: res.data.nickName,
            avatarUrl: res.data.avatarUrl
          });
          console.log(uni.getStorageSync("user"));

          uni.switchTab({
            url: "/pages/records/index"
          });
        }
      });
    },
    clickRegister() {
      uni.navigateTo({
        url: "/pages/register/index"
      });
    }
  }
};
</script>

<style>
page {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2;
}

/*登录图片*/

.login-icon {
  flex: none;
}

.login-img {
  width: 100%;
}

/*表单内容*/

.login-from {
  margin-top: 22px;
  flex: auto;
  height: 100%;
}

.inputView {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

/*输入框*/

.nameImage,
.keyImage {
  margin-left: 20px;
  margin-top: 3px;
  margin-right: 5px;
  width: 14px;
  height: 14px;
}

.loginLab {
  color: #545454;
  font-size: 14px;
  width: 40px;
}

.inputText {
  margin-left: 15px;
  text-align: left;
  color: #ccc;
  font-size: 14px;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 1px;
}

/*按钮*/

.loginBtnView {
  width: 100%;
  height: auto;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 80%;
  margin-top: 35px;
}

.registerBtn {
  position: absolute;
  bottom: 1%;
  right: 1%;
  border: none !important;
  text-decoration: underline;
  color: blue !important;
}
.getBackPassBtn {
  position: absolute;
  bottom: 1%;
  left: 1%;
  border: none !important;
  text-decoration: underline;
  color: gray !important;
}
</style>